<template>
  <el-form
    label-position="top"
    :rules="formRules"
    :model="form"
    ref="formDom"
    class="login-form"
  >
    <el-form-item class="login-title"> 修改您的密碼 </el-form-item>
    <el-form-item label="郵箱號" prop="email" class="login-item email">
      <el-input
        type="text"
        v-model.trim="form.email"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密碼" prop="password" class="login-item password">
      <el-input
        type="password"
        v-model.trim="form.password"
        autocomplete="off"
        :show-password="true"
      ></el-input>
    </el-form-item>
    <el-form-item label="確認密碼" prop="passwordConfirm" class="login-item password">
      <el-input
        type="password"
        v-model.trim="form.passwordConfirm"
        autocomplete="off"
        :show-password="true"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="谷歌驗證器"
      prop="googleCode"
      class="login-item validate-code"
    >
      <el-input
        type="text"
        v-model.trim="form.googleCode"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item class="login-item login-btn">
      <el-button style="width: 100%" type="primary" @click="onClickSubmit"
        >確認</el-button
      >
      <div class="register-tip">
        已有smoothfinch賬戶?<a @click="onClickToLogin">立即登錄</a>
      </div>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";
import { useRefindPwd } from "@/hooks/login";

const formDom = ref(null);
const emit = defineEmits(["formToggle"]);
const { form, formRules, submitForm } = useRefindPwd();

// 跳转登录
const onClickToLogin = () => {
  emit("formToggle", "login");;
}

// 找回密码
const onClickSubmit = () => {
  submitForm(formDom, onClickToLogin);
}

</script>

<style lang="scss" scoped>
.login-form {
  margin-top: 80px;
  :deep(.login-title) {
    .el-form-item__content {
      color: #3d3d3d;
      font-weight: bold;
      font-size: 36px;
      margin-bottom: 43px;
    }
  }

  :deep(.login-item) {
    .el-form-item__label {
      color: #3d3d3d;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 15px;
    }

    .el-form-item__content {
      width: 460px;

      .el-input__wrapper {
        border-radius: 8px;
        background: #ededed;

        .el-input__inner {
          height: 44px;
        }
      }
    }

    &.email {
      margin-bottom: 26px;
    }

    &.password {
      position: relative;
      margin-bottom: 48px;

      .el-form-item__content {
        .el-input__wrapper {
          padding-right: 40px;
          .el-input__suffix {
            position: absolute;
            right: 1vw;
          }
        }
      }

      .eye-icon {
        position: absolute;
        right: 16px;
        font-size: 6px;
        cursor: pointer;
      }

      .forget-password {
        position: absolute;
        right: 0px;
        font-size: 14px;
        color: #3d5dc7;
        bottom: -35px;
        cursor: pointer;
        user-select: none;
      }
    }

    &.validate-code {
      margin-bottom: 40px;
    }

    &.login-btn {
      .el-button {
        width: 460px;
        height: 61px;
        line-height: 61px;
        border-radius: 8px;
        background: #2fc2af;
        font-size: 24px;
        color: #fff;
        font-weight: bold;
      }

      .register-tip {
        margin-top: 28px;
        color: #b0b0b0;
        font-size: 18px;
        width: 100%;
        text-align: center;
        user-select: none;
        a {
          cursor: pointer;
          color: #3d5dc7;
        }
      }
    }
  }
}
</style>
